<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.title" :placeholder="$t('table.title')" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">
        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in modelTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
      </el-select>
      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        {{ $t('table.search') }}
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        创建模型
      </el-button>
      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
        {{ $t('table.reviewer') }}
      </el-checkbox>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="modelList"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
      <el-table-column :label="$t('model_list.model_id')" prop="id" sortable="custom" align="center" min-width="50" :class-name="getSortClass('id')">
        <template slot-scope="{row}">
          <span>{{ row.modelId }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('model_list.model_name')" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">{{ row.modelName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('model_list.model_type')" min-width="50px">
        <template slot-scope="{row}">
          <!--
            <el-tag>{{ row.modelType | modelTypeFilter }}</el-tag>
          -->
          <el-tag :type="row.modelType | modelTypeFilter">
            {{ row.modelType | modelTypeFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('model_list.model_key')" min-width="80px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">{{ row.modelKey }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('model_list.running_instance')" align="center" min-width="50">
        <template slot-scope="{row}">
          <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
          <span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('model_list.incidents')" align="center" min-width="50">
        <template slot-scope="{row}">
          <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
          <span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('model_list.status')" class-name="status-col" min-width="50">
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusFilter">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('model_list.create_time')" min-width="55px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('model_list.creator')" min-width="50px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.creator }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('model_list.update_time')" min-width="55px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('model_list.updator')" min-width="50px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.updator }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.actions')" align="center" width="160" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            {{ $t('table.edit') }}
          </el-button>
          <el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
            {{ $t('table.publish') }}
          </el-button>
          <el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
            {{ $t('table.draft') }}
          </el-button>
          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(row,'deleted')">
            {{ $t('table.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getModelList" />

    <!--创建模型弹框 Start-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :width="dialogWidth" :center="true">
      <el-form ref="dataForm" :rules="rules" :model="progressModelData" label-position="right" label-width="120px" style="width: 500px; margin-left:50px;">
        <el-form-item :label="$t('model_form.model_name')" prop="modelName">
          <el-input v-model="progressModelData.modelName" placeholder="请输入模型名称, 允许使用中文命名" />
        </el-form-item>
        <el-form-item :label="$t('model_form.model_key')" prop="modelKey">
          <el-input v-model="progressModelData.modelKey" placeholder="请使用英文字母设置模型的唯一标志" />
        </el-form-item>
        <el-form-item :label="$t('model_form.model_type')" prop="modelType">
          <el-select v-model="progressModelData.modelType" class="filter-item" placeholder="请选择模型类型">
            <el-option v-for="item in modelTypeOptions" :key="item.key" :label="item.displayName" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('model_form.create_type')" prop="createType">
          <el-select v-model="progressModelData.createType" class="filter-item" placeholder="请选择创建方式">
            <el-option v-for="item in createTypeOptions" :key="item.key" :label="item.displayName" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('model_form.remark')">
          <el-input v-model="progressModelData.remark" :autosize="{ minRows: 2, maxRows: 8}" type="textarea" placeholder="请输入模型描述" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          {{ $t('table.confirm') }}
        </el-button>
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
      </div>
    </el-dialog>
    <!--创建模型弹框 End-->

    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="key" label="Channel" />
        <el-table-column prop="pv" label="Pv" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script src="../../app/bpmn/model-list.js"></script>
